<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <h2>网络信号优化系统</h2>
      </div>
      <div class="header-right">
        <span class="username">管理员</span>
        <el-button type="primary" @click="handleLogout">退出</el-button>
      </div>
    </el-header>

    <!-- 主体布局 -->
    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/home/dashboard">
            <el-icon><DataBoard /></el-icon>
            <span>首页</span>
          </el-menu-item>
          
          <el-menu-item index="/home/device-management">
            <el-icon><Monitor /></el-icon>
            <span>设备管理</span>
          </el-menu-item>
          
          <el-menu-item index="/home/signal-monitor">
            <el-icon><TrendCharts /></el-icon>
            <span>信号监测</span>
          </el-menu-item>
          
          <el-menu-item index="/home/task-management">
            <el-icon><List /></el-icon>
            <span>任务管理</span>
          </el-menu-item>
          
          <el-menu-item index="/home/result-analysis">
            <el-icon><PieChart /></el-icon>
            <span>结果分析</span>
          </el-menu-item>
          
          <el-menu-item index="/home/user-management">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          
        </el-menu>
      </el-aside>

      <!-- 主体内容区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  DataBoard,
  Monitor,
  Setting,
  Clock,
  TrendCharts,
  List,
  PieChart,
  DataAnalysis,
  User
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeMenu = ref('')

// 设置当前激活的菜单项
const setActiveMenu = () => {
  activeMenu.value = route.path
}

// 监听路由变化，更新激活菜单
watch(() => route.path, () => {
  setActiveMenu()
})

onMounted(() => {
  setActiveMenu()
})

const handleMenuSelect = (index) => {
  router.push(index)
}

const handleLogout = () => {
  localStorage.removeItem('token')
  ElMessage.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409eff;
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.username {
  font-size: 14px;
}

.main-container {
  flex: 1;
  height: calc(100vh - 60px);
}

.sidebar {
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.main-content {
  padding: 20px;
  background-color: #f8f9fa;
}
</style>